<template>
<!--    文章头部-->
    <header class="article-head">
        <div class="article-title"><h3><strong>序 / INTRO</strong></h3></div>
        <div class="article-meta">
            <div>
                <span>
                    <span  class="iconfont icon-fabu"></span> 发布于 <time>2020-08-25</time>
                </span>
                <span>
                    <span  class="iconfont icon-gengxin"></span> 更新于 <time>2020-08-26</time>
                </span>
                <span>
                    <span  class="iconfont icon-pinglun1"></span> 评论 <span class="article-meta-add-bottom">20</span>
                </span>
                <span>
                    <span  class="iconfont icon-yuedu1"></span> 阅读次数 <span>2020</span>
                </span>
            </div>
            <div>
                <span>
                    <span  class="iconfont icon-wenben1"></span> 文本 <span>2020</span>
                </span>
            </div>
        </div>
    </header>
</template>

<script>
export default {
    name: 'ArticleHead',
    data() {
        return {

        }
    },
}
</script>

<style scoped>
/* 文章头 */
.article-head {
    font-size: 12px;
    color: #999;
}

.article-head .article-title {
    margin: 15px 0;
}
.article-head .article-title strong {
    position: relative;
    font-weight: 400;
    font-size: 20px;
    color: #555;
    cursor: pointer;
}
.article-head .article-title strong::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: all .2s ease-in-out;
    transform: scaleX(0);
    transform-origin: 0% 0%;
}
.article-head .article-title strong:hover::after {
    transform: scaleX(1);
}

.article-head .article-meta .article-meta-add-bottom {
    border-bottom: 1px solid #999;
}
.article-head .article-meta .article-meta-add-bottom:hover {
    color: #222;
    border-bottom-color: #222;
    cursor: pointer;
}

.article-head .article-meta div {
    padding: 5px 0;
}

.article-head .article-meta div > span {
    margin: 10px 8px;
}

.article-head .article-meta time {
    border-bottom: 1px dashed #999;
}
.article-head .article-meta time:hover {
    cursor: help;
}

.article-head .iconfont {
    font-size: 12px;
}
</style>
